<template>
  <div class="goods-sku">
    <!-- 颜色 -->
    <div class="item">
      <div class="dt">颜色</div>
      <div class="dd">
        <img
          src="https://yanxuan-item.nosdn.127.net/32fa1c218165f8acf3a5f6c8e4b73eba.png?type=webp&imageView&thumbnail=50x50&quality=95"
          alt="蓝色"
          :class="[active === 1 ? 'border-style' : '']"
          @click="active = 1"
        />
        <img
          src="https://yanxuan-item.nosdn.127.net/dd4b8da6d6b2d47ad063302eab55d0a7.png?type=webp&imageView&thumbnail=50x50&quality=95"
          alt=""
          :class="[active === 2 ? 'border-style' : '']"
          @click="active = 2"
        />
      </div>
    </div>
    <!-- 尺寸 -->
    <div class="item">
      <div class="dt">尺寸</div>
      <div class="dd">
        <span class="size">10cm</span>
        <span class="size">12cm</span>
        <span class="size">14cm</span>
      </div>
    </div>
    <!-- 产地 -->
    <div class="item">
      <div class="dt">产地</div>
      <div class="dd">
        <span class="size">中国</span>
        <span class="size">日本</span>
      </div>
    </div>
    <!-- 数量 -->
    <div class="item">
      <div class="dt">数量</div>
      <div class="dd">
        <div class="goods-number">
          <a href="javascript:;" class="jy">-</a>
          <input type="text" readonly value="1" />
          <a href="javascript:;">+</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const active = ref(0);
</script>
<style scoped lang="less">
.goods-sku {
  padding: 0 10px;
  .item {
    color: rgb(153, 153, 153);
    display: flex;
    padding-top: 20px;
    align-items: center;
    .dt {
      width: 50px;
    }
    .dd {
      flex: 1 1 0%;
      color: rgb(102, 102, 102);
    }
    img {
      width: 50px;
      height: 50px;
      margin-right: 10px;
      border: 1px solid rgb(228, 228, 228);
      cursor: pointer;
    }
    .border-style {
      border: 1px solid rgb(39, 186, 155);
    }
    .size {
      border: 1px solid rgb(228, 228, 228);
      display: inline-block;
      margin-right: 10px;
      line-height: 20px;
      cursor: pointer;
      // 是否可以选择文本
      user-select: none;
      padding: 5px 25px;
    }
    .goods-number {
      width: 116px;
      height: 28px;
      border: 1px solid rgb(228, 228, 228);
      display: flex;
      a {
        width: 28px;
        text-align: center;
        line-height: 26px;
        font-size: 18px;
      }
      .jy {
        cursor: not-allowed;
        color: rgb(204, 204, 204);
      }
      input {
        border-left: 1px solid rgb(228, 228, 228);
        border-right: 1px solid rgb(228, 228, 228);
        width: 60px;
        line-height: 26px;
        text-align: center;
        color: rgb(102, 102, 102);
      }
    }
  }
}
</style>
